<template>
  <div class="container">
    <div class="banner">
      <img
        src="http://www.juyike.cn/Public/Home/images/img_con/gzzr.jpg"
        alt="关注聚益科"
      />
      <h2>关注聚益科</h2>
    </div>
    <div class="doc">
      <div class="research">
        <el-input v-model="titleName" placeholder="关键字"></el-input>
        <el-button @click="searchData()">搜索</el-button>
      </div>
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)
        "
        style="width: 100%"
        :show-header="false"
      >
        <el-table-column width="100%">
          <template #default="{ row }">
            <span>
              <a href="#">{{ row.title }}</a>
              <a href="#">{{ row.introduction }}</a>
            </span>
            <span>{{ row.date }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 20, 40]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next"
        :total="tableDataLength"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
import { ConcernJyklist_list } from '@/api/index.js';
export default {
  data() {
    return {
      titleName: "",
      currentPage: 1, //初始页
      pagesize: 10, //    每页的数据
      tableData: [],
      tableDataLength:''
    };
  },
  created(){
    this.getData()
  },
  methods: {
    searchData(){
      this.getData(1)
    },
    // 获取数据
    getData(currentPage) {
      const data={data:{id:'4315202105191705632',titleName:this.titleName},page:currentPage}

      ConcernJyklist_list(data).then(res=> {
        console.log(res.data,'关注聚益科');
        this.tableData.push(...res.data.list)
        this.tableDataLength = parseInt(res.data.total) 
      })
      .catch(error=>{
          console.log(error)
      });
      // axios({
      //     url: 'http://test.jyk.com/api/site/ConcernJyk/show/list',
      //     method: "POST",
      //     data:{data:{id:'4315202105191705632',titleName:this.titleName},page:currentPage}
      //   })
      //   .then((res) => {
      //       console.log(res.data.data,'关注聚益科');
      //       this.tableData.push(...res.data.data.list)
            
      //       this.tableDataLength = parseInt(res.data.data.total) 
      //   })
      //   .catch((res) => {
      //     failure("error");
      //   });
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData(val)
    }
  },
};
</script>
<style lang="less">
.container {
  width: 78.5%;
  left: 12.5%;
  position: absolute;
  top: 0;
  min-width: 1050px;
  max-width: 1200px;
  box-shadow: 5px 0 5px #f0f0f0;
  font-family: "微软雅黑";
  .banner {
    width: 100%;
    position: relative;
    img {
      width: 100%;
    }
    h2 {
      font-weight: 500;
      color: #fff;
      opacity: 0.7;
      font-size: 42px;
      line-height: 42px;
      position: absolute;
      left: 25px;
      top: 40%;
    }
  }
  .doc {
    .research {
      margin: 4% 0 0 4%;
      .el-input {
        display: inline;
        .el-input__inner {
          border: 1px solid #a90621;
          width: 200px;
          height: 30px;
          line-height: 30px;
          padding: 0 5px;
          float: left;
          border-radius: 0;
        }
      }
      .el-button {
        background: #a90621;
        text-align: center;
        min-height: 30px;
        color: #fff;
        padding: 0 8px;
        float: left;
        border-radius: 0;
        border: 1px solid #a90621;
      }
    }
    .el-table__body-wrapper {
      width: 92%;
      margin: 20px auto 30px;
      .el-table__body {
        width: 100% !important;
        span:nth-of-type(1) {
          float: left;
          display: inline-block;
          width: 85%;
          overflow: hidden;
          text-align: left;
          text-overflow: ellipsis;
          white-space: nowrap;
          font-size: 16px;
          padding: 10px 0;
          a {
            text-decoration: none;
            color: #333;
          }
          a:nth-of-type(1) {
            color: #666;
            margin-right: 3px;
          }
          a:hover {
            color: #aa001b;
          }
        }
        span:nth-of-type(2) {
          padding: 10px 0;
          float: right;
          color: #737373;
          display: inline-block;
          width: 10%;
        }
      }
    }
    .el-pagination {
      text-align: center;
    }
  }
}
</style>
